import {storeBindingsBehavior} from 'mobx-miniprogram-bindings'
import {store} from '../../store/store'

Component({
  options: {
    // 控制组件和宿主的样式隔离，只针对class选择器隔离，而标签选择器和id选择器始终不会隔离
    // isolated: 隔离
    // apply-shared: 不隔离，页面会影响组件
    // shared: 页面和组件相互影响
    styleIsolation: "isolated",
    multipleSlots: true 
  },
  // 绑定store到本组件中
  behaviors: [storeBindingsBehavior], // 通过storeBindingsBehavior实现自动绑定
  storeBindings: {
    store,
    fields: {
      numA: () => store.numA, // 绑定字段第1中方式
      numB: (store) => store.numB, // 绑定字段的第2种方式
      sum: 'sum' // 绑定字段的第3种方式
    },
    actions: ['updateNum1','updateNum2']
  },
  // 组件自己的生命周期函数
  lifetimes: {
    created() {
      console.log('test组件 created')
    },
    attached() {
      console.log('test组件 attached')
    }
  },
  // 组件监听页面生命周期事件
  pageLifetimes: {
    show() {
      console.log('test组件中监听，页面显示了')
    },
    hide(){
      console.log('test组件中监听，页面隐藏了')
    },
    resize(size){
      console.log('test组件中监听，页面尺寸变化了，size：', size)
    }
  },

  // 属性监听
  observers: {
    // 只要有一个属性变化，就会执行回调函数
    'max, count': function(maxNew, countNew) {
      console.log('max新值：', maxNew)
      console.log('count新值：', countNew)
    },
    'n1, n2': function(n1, n2) {
      this.setData({
        sum: this.properties.n1 + this.properties.n2
      })
    }
  },

  /**
   * 组件的属性列表
   * 页面使用组件时，就可以指定属性将值传递到组件内部
   * data和properties是同一对象，properties中的变量和data中的变量一样，都是可读可写的，只不过data更倾向于存储组件内部的数据，而properties更倾向于存储外界传递到组件内部的数据。 
   * properties中的属性也可以用于页面插值表达式中，也可以用this.setData方法为properties中的属性赋值。
   */
  properties: {
    max: { // 属性名称为max
      type: Number, // 属性类型为Number
      value: 10, // 属性值默认值为10
      n1: 0,
      n2: 0
    }
    // max: Number // 属性定义的简化方式，只指定类型，不指定默认值 
  },

  /**
   * 组件的初始数据
   */
  data: {
    count: 0,
    sum: 0,
  },

  /**
   * 组件的方法列表，事件处理函数和自定义方法都写在methods中 
   */
  methods: {
    addCount() {
      if (this.data.count === this.properties.max) {
        this._showCount()
      } else {
        this.setData({
          count: this.data.count + 1
        })
      }
    },
    _showCount() {
      wx.showToast({
        title: 'count的最大值为：' + this.properties.max,
        icon: 'none'
      })
    },
    // 验证data和properties是同一对象
    showInfo() {
      console.log(this.data) // {count: 0, max: 5}
      console.log(this.properties) // {count: 0, max: 5}
      console.log(this.data === this.properties) // true 
    },

    // 触发myEventFunc事件
    triggerMyEventFunc() {
      this.triggerEvent('myEventFunc', {name:'Jack', age:18})
    },

    // 调用store中的action
    myUpdateNum1(e) {
      this.updateNum1(e.target.dataset.step)
    },
    myUpdateNum2(e) {
      this.updateNum2(e.target.dataset.step)
    }
  }
})